<template>
  <view class="edit-profile">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <uni-icons type="arrow-left" size="24" color="#333"></uni-icons>
      </view>
      <view class="page-title">编辑资料</view>
      <view class="save-btn" @click="saveProfile">保存</view>
    </view>
    
    <!-- 头像编辑 -->
    <view class="avatar-edit">
      <view class="avatar-wrapper">
        <image :src="userInfo.avatar || '/static/images/default-avatar.png'" mode="aspectFill" class="avatar"></image>
        <view class="edit-icon" @click="chooseAvatar">
          <uni-icons type="camera" size="20" color="#fff"></uni-icons>
        </view>
      </view>
      <text class="avatar-tip">点击更换头像</text>
    </view>
    
    <!-- 表单内容 -->
    <view class="form-content">
      <view class="form-item">
        <text class="form-label">昵称</text>
        <input type="text" v-model="userInfo.name" placeholder="请输入昵称" class="form-input" />
      </view>
      
      <view class="form-item">
        <text class="form-label">性别</text>
        <view class="gender-options">
          <view 
            class="gender-option" 
            :class="{ active: userInfo.gender === 'male' }"
            @click="userInfo.gender = 'male'"
          >
            <text>男</text>
          </view>
          <view 
            class="gender-option" 
            :class="{ active: userInfo.gender === 'female' }"
            @click="userInfo.gender = 'female'"
          >
            <text>女</text>
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">手机号</text>
        <view class="phone-input">
          <text class="phone-value">{{ formatPhone(userInfo.phone) }}</text>
          <view class="change-btn" @click="changePhone">更换</view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">生日</text>
        <picker 
          mode="date" 
          :value="userInfo.birthday" 
          start="1950-01-01" 
          end="2010-12-31" 
          @change="birthdayChange"
          class="date-picker"
        >
          <view class="picker-value">
            <text>{{ userInfo.birthday || '请选择生日' }}</text>
            <uni-icons type="right" size="16" color="#ccc"></uni-icons>
          </view>
        </picker>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 用户信息
const userInfo = ref({
  name: '张先生',
  phone: '13812345678',
  avatar: '/static/images/avatar.jpg',
  gender: 'male',
  birthday: '1990-01-01'
});

// 格式化手机号
const formatPhone = (phone) => {
  if (!phone) return '';
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 选择头像
const chooseAvatar = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: function(res) {
      userInfo.value.avatar = res.tempFilePaths[0];
    }
  });
};

// 生日选择
const birthdayChange = (e) => {
  userInfo.value.birthday = e.detail.value;
};

// 更换手机号
const changePhone = () => {
  uni.navigateTo({
    url: '/pages/mine/change-phone'
  });
};

// 保存资料
const saveProfile = () => {
  if (!userInfo.value.name) {
    uni.showToast({
      title: '请输入昵称',
      icon: 'none'
    });
    return;
  }
  
  uni.showLoading({
    title: '保存中...'
  });
  
  // 模拟保存请求
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '保存成功',
      icon: 'success'
    });
    
    // 返回上一页
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }, 1000);
};
</script>

<style lang="scss" scoped>
.edit-profile {
  min-height: 100vh;
  background-color: #f5f5f5;
}

// 顶部导航栏
.nav-bar {
  display: flex;
  align-items: center;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  
  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .page-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    margin-right: 60rpx; // 为了标题居中
  }
  
  .save-btn {
    font-size: 30rpx;
    color: #ff7a45;
  }
}

// 头像编辑
.avatar-edit {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
  background-color: #fff;
  margin-bottom: 20rpx;
  
  .avatar-wrapper {
    position: relative;
    width: 160rpx;
    height: 160rpx;
    border-radius: 80rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
    
    .avatar {
      width: 100%;
      height: 100%;
    }
    
    .edit-icon {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50rpx;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  
  .avatar-tip {
    font-size: 26rpx;
    color: #999;
  }
}

// 表单内容
.form-content {
  background-color: #fff;
  
  .form-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .form-label {
      width: 140rpx;
      font-size: 30rpx;
      color: #333;
    }
    
    .form-input {
      flex: 1;
      height: 60rpx;
      font-size: 30rpx;
    }
    
    .gender-options {
      flex: 1;
      display: flex;
      
      .gender-option {
        width: 120rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        border-radius: 30rpx;
        background-color: #f5f5f5;
        margin-right: 20rpx;
        
        text {
          font-size: 28rpx;
          color: #666;
        }
        
        &.active {
          background-color: #fff8f6;
          border: 1px solid #ff7a45;
          
          text {
            color: #ff7a45;
          }
        }
      }
    }
    
    .phone-input {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .phone-value {
        font-size: 30rpx;
        color: #333;
      }
      
      .change-btn {
        font-size: 28rpx;
        color: #ff7a45;
      }
    }
    
    .date-picker {
      flex: 1;
      
      .picker-value {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        text {
          font-size: 30rpx;
          color: #333;
        }
      }
    }
  }
}
</style>